<template>
	<view class="main_bg">
		<app-header title="设备详情"></app-header>
		<view class="tabs flex-s">
			<view class="tabs_son flex-c" :class="[active==1?'active':'']" @click="setActive(1)">设备详情</view>
			<view class="tabs_son flex-c" :class="[active==2?'active':'']" @click="setActive(2)">维修记录</view>
			<view class="tabs_son flex-c" :class="[active==3?'active':'']" @click="setActive(3)">巡检记录</view>
		</view>
		<view class="card">
			<detailInfo :info="deviceInfo" v-if="active==1 && deviceInfo.id"></detailInfo>
			<detailRecord :info="deviceInfo" v-if="active==2 && deviceInfo.id"></detailRecord>
			<detailInspection :info="deviceInfo" v-if="active==3 && deviceInfo.id"></detailInspection>
		</view>
	</view>
</template>

<script>
	import detailInfo from "./detailInfo"
	import detailRecord from "./detailRecord"
	import detailInspection from "./detailInspection"
	export default {
		components:{
			detailInfo,detailRecord,detailInspection
		},
		data() {
			return {
				active: 1,
				deviceFilter: {},
				deviceInfo:{}
			}
		},
		onLoad(options) {

			this.$set(this.deviceFilter, 'id', options.id)
			this.getInfo()

		},
		methods: {
			setActive(active) {
				this.active = active
			},
			getInfo() {
				this.$http.post('/data/api.auth.User/deviceVier', this.deviceFilter).then(res => {
					this.deviceInfo = res.data
					
	 
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.tabs {
		height: 102rpx;
		background: #FFFFFF;

		.tabs_son {
			font-size: 28rpx;
			color: #ADADAD;
			flex: 1;
			height: 102rpx;

			&.active {
				color: #4F6FF6;
			}
		}
	}

	
</style>